<template>
    <div>
        <cus-modal
            ref="modal"
            title="选择导入食谱具体餐次"
            :width="1000"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div class="noticeBox">
                <div class="tableBox">
                    <div class="tableBox-title">
                        <div class="tableBox-title-item titleItem"></div>
                        <div class="tableBox-title-item titleItem" v-for="(item, index) in dateStrList" :key="index" :style="{borderRight: (index + 1) == dateStrList.length ? 'none' : ''}">{{ item.name }}</div>
                    </div>
                    <div class="tableBox-title" v-for="(item, index) in keysObjArr" :key="index" style="margin-top:-1px">
                        <div class="tableBox-title-item detItem">{{ item.label | mealTimeName(mealTimeList) }}</div>
                        <div class="tableBox-title-item detItem" v-for="(it, idx) in item.days" :class="it.haveFood ? 'yesFood' : 'noFood'" :key="idx" :style="{borderRight: (idx + 1) == item.days.length ? 'none' : ''}">
                            <span>{{ !it.haveFood ? '无菜品数据' : '已有菜品数据' }}</span>
                            <div v-if="it.cover" class="coverItem">(替换)</div>
                            <div v-else class="coverItem" style="color:gray">(不替换)</div>
                            <div class="coverBtn" @click="changeCover(index, idx, !it.cover)" :class="it.cover ? 'coverBtnTrue' : 'coverBtnFalse'">
                                <span v-if="!it.cover" >确认替换</span>
                                <span v-else>取消替换</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top:10px">提示：</div>
                <div>1、没有菜品数据的日期餐次，默认替换该餐次的菜品数据</div>
                <div>2、已有菜品数据的日期餐次，需要用户决定，点击替换按钮确认替换</div>
            </div>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button size="small" class="mr_2" @onClick="onCancel">取消</cus-button>
                        <cus-button type="primary" size="small" @onClick="onOk">确认</cus-button>
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>

export default {
    components: {},
    name: "chooseCoverData",
    data() {
        return {
            mealTimeList: [
                { label: 'breakfast', name: '早餐', type: 0 },
                { label: 'betwwenMealOne', name: '早~午间餐', type: 3 },
                { label: 'lunch', name: '午餐', type: 1},
                { label: 'betwwenMealTwo', name: '午~晚间餐', type: 4},
                { label: 'supper', name: '晚餐', type: 2 },
                { label: 'midnightMealOne', name: '夜餐1', type: 5 },
                { label: 'midnightMealTwo', name: '夜餐2', type: 6 }
            ],
            originData: {}, // 原始数据
            newData: {},
            nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
            keysObjArr: []
        };
    },
    props: {
        dateStrList: {
            type: Array,
            default () {
                return []
            }
        },
        dateList: {
            type: Array,
            default () {
                return []
            }
        }
    },
    // 餐次名称过滤
    filters: {
        mealTimeName(value, mealTimeList) {
            let a = mealTimeList.filter(item => item.label == value);
            return a.length ? a[0].name : '';
        }
    },
    mounted() {
       
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.$parent.changguiId = null;
            }
        },     
        show(originData, newData) {
            this.$refs["modal"].show = true;
            this.originData = this.$cu.deepClone(originData);
            console.log(this.originData)
            // 先计算总共有几个餐次
            let keysArr = [];
            let keysObjArr = [];
            for (const key in this.originData) {
                if(key != 'meal_plan' && key != 'mealRepastNumber') {
                    keysArr.push(key);
                    let obj = {
                        label: key,
                        days: []
                    }
                    this.nums.forEach(item => {
                        obj.days.push({
                            label: item,
                            haveFood: this.originData[key].dayMeal[item].food.length ? true : false,
                            cover: this.originData[key].dayMeal[item].food.length ? false : true
                        })
                    })
                    keysObjArr.push(obj)
                }
            }
            this.keysObjArr = this.$cu.deepClone(keysObjArr)
            console.log(keysObjArr)
            // let keysArr2 = [];
            // this.mealTimeList.forEach(item => {
            //     if(keysArr.indexOf(item.label) > -1) {
            //         keysArr2.push(keysArr[keysArr.indexOf(item.label)])
            //     }
            // })
            
            this.newData = this.$cu.deepClone(newData);
        },
        //模态框取消
        onCancel() {
            this.keysObjArr = [];
            this.$refs["modal"].show = false;
        },
        onOk() {
            this.keysObjArr.forEach(item => {
                item.days.forEach(it => {
                    if(it.cover) {
                        this.originData[item.label].dayMeal[it.label].food = this.newData[item.label].dayMeal[it.label].food;
                    }
                })
            })
            let a = this.$cu.deepClone(this.originData)
            this.$emit('coverSuccess', a);
            this.onCancel();
        },
        changeCover(index, idx, status) {
            this.$set(this.keysObjArr[index].days[idx], 'cover', status)
        }
    },
};
</script>

<style scoped lang="less">
/deep/.ivu-checkbox-border {
    line-height: 0!important;
}
/deep/.ivu-modal-mask {
    z-index: 999999!important;
}
/deep/.ivu-modal-wrap {
    z-index: 999999!important;
}

.tableBox {
    &-title {
        display: flex;
        border: 1px solid #cccccc;
        &-item {
            
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            border-right: 1px solid #cccccc;
        }
    }
}

.titleItem {
    background: #33A5FE;
    color: #FFFFFF;
    height: 50px;
}

.yesFood {
    color: #0D9D59;
}
.noFood {
    color: gray;
}
.coverItem {
    width: 100%;
    margin-top: 5px;
    text-align: center;
    color: #33A5FE;
}
.detItem {
    padding: 10px 0;
}
.coverBtn {
    margin: 10px auto 0;
    width: 60%;
    font-size: 12px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
}
.coverBtnTrue {
    border: 1px solid red;
    color: red;
}

.coverBtnFalse {
    border: 1px solid #0D9D59;
    color: #0D9D59;
}
</style>
